<template>
  <div>
    
    <!-- <div class="logo"> -->
      <!-- <i class="el-icon-tableware"> -->
      <img class="logo" :src="imgs" alt="" v-if="imgs">
      <img class="logo" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.dtstatic.com%2Fuploads%2Fblog%2F202103%2F31%2F20210331160001_9a852.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.dtstatic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672495787&t=eb87220fb707bf213b9c9e4a8cd31af3" alt="" v-else>
    <!-- </div> -->

    <div class="title">欢迎来到哒哒哒的世界</div>
    <div style="position: relative">
      <input type="text" class="ipt ipt1" placeholder="请输入手机号" v-model="mobile" @blur="mobiles">
      
    </div>
    <div style="position: relative">
      <input type="text" class="ipt ipt2" placeholder="请输入校验码" v-model="codes">
      <span style="position: absolute;right: 30px;top: 5px;"><img @click="img" :src="'http://127.0.0.1:8000/customer/image_code/' + uuid +'/'"></span>
    </div>
    <div style="position: relative">
    <input type="text" class="ipt ipt2" placeholder="请输入验证码" v-model="code">
      <span style="position: absolute;right: 30px;top: 35px" @click="send_sms">发送验证码</span>
    </div>

    <el-button class="btn" @click="login">登录</el-button>

    <!-- <div>
      <div class="icon">
        <div @click="dingding_login"><b>钉钉
          </b></div>
        <div>微信</div>
        <div>QQ</div>
      </div>
    </div> -->
  </div>
</template>

<script>
import {v4 as uuid4} from 'uuid'
export default {
  name: "LoginView.vue",
  data() {
    return {
      mobile: "",
      code: "",
      codes: "",
      uuid:'',
      imgs:'',
    }
  },
  mounted(){
    this.img()
  },
  methods: {
    mobiles(){
      this.$axios.get("customer/mobile/img/" + this.mobile + '/').then(res => {
        if (res.data.code == 200) {
          console.log('>>>>>>>',res.data.data)
          this.imgs = res.data.data.img

        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    img(){
      this.uuid = uuid4()
      console.log('dadasd',this.uuid)
    },
    send_sms() {
      this.$axios.get("customer/sms/" + this.mobile + '/',{
        params:{
          uuid:this.uuid,
          code:this.codes,
        }
      }).then(res => {
        if (res.data.code == 200) {
          this.$message.success(res.data.msg)
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    login() {
      this.$axios.post("customer/login/", {
        "mobile": this.mobile,
        "sms": this.code,
      }).then(res => {
        if (res.data.code == 200) {
          this.$message.success(res.data.msg)
          localStorage.setItem("token", res.data.token)
          this.$router.push("/home")
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    dingding_login() {
      const url = "https://login.dingtalk.com/oauth2/auth?redirect_uri=http://127.0.0.1:8080/&response_type=code&client_id=dingwu7anyv32o1nckn2&scope=openid&prompt=consent"
      window.location.href = url
    }
  }
}
</script>

<style scoped>
.logo {
  background-color:rgb(140, 232, 255);
  width: 100px;
  height: 100px;
  border-radius: 15px;
  font-size: 80px;
  color: rgb(102, 255, 235);
  line-height: 100px;
  text-align: center;
  margin-left: 150px;
  margin-top: 150px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-top: 10px;
}

.ipt {
  width: calc(100% - 60px);
  height: 50px;
  padding: 10px 20px 10px 0px;
  border: none;
  border-bottom: 1px solid #BBB;
  margin: 20px 30px 0;

}

.btn, .btn:hover {
  background-color:rgb(137, 241, 255);
  border: none;
  margin: 40px 30px 140px;
  height: 40px;
  width: calc(100% - 60px);
  color: #000000;
  border-radius: 20px;
}

.icon {
  display: flex;
  justify-content: center;
}

.icon div {
  width: 50px;
  height: 50px;
  border: 1px solid rgb(173, 173, 173);
  color: rgb(173, 173, 173);
  border-radius: 30px;
  text-align: center;
  line-height: 50px;
  margin: 0 10px;
}
</style>
